<template>
    <div>
        <a-modal
            :title="currentData.title?currentData.title:'变更工作单位'"
            :visible="visible"
            @ok="handleOk"
            @cancel="visible = false"
            :width="1000"
            class="change-unit-modal"
            width="100%"
            wrapClassName="change-unit-full-modal"
        >
            <a-tabs v-model:activeKey="activeKey" default-active-key="变更工作单位" :key="tabsKey" v-if="!currentData.isDisabled">
                <a-tab-pane key="变更工作单位" tab="变更工作单位"></a-tab-pane>
                <a-tab-pane key="变更记录" tab="变更记录">
                    <!-- /userBgsq/queryMyGzdwSqList -->
                    
                </a-tab-pane>
            </a-tabs>
            <div v-if="activeKey == '变更工作单位'">
                <div :key="modalKey">
                    <div style="display: flex;align-items: center;">
                        <div style="width: 104px;text-align: right;">
                            <span>*</span>
                            <span>新工作单位：</span>
                        </div>
                        <!-- v-model:value="fromState.fjcyzsbh" -->
                        <a-input v-if="!currentData.isDisabled" style="flex: 1;" placeholder="请输入新工作单位" v-model:value="currentData.fbghxx" />
                        <span v-else>{{ currentData.fbghxx }}</span>
                    </div>
                    <div style="display: flex;align-items: center;margin: 10px 0;">
                        <div>
                            <span>*</span>
                            <span>工作变更证明：</span>
                        </div>
                        <div v-if="!currentData.id && !currentData.isDisabled">
                            <a-upload v-if="currentData.fbghxx" style="display: inline-block;" :beforeUpload="$event=>{return false}" :showUploadList="false" action="" @change="ctagingClick($event)">
                                <a-button class="blue-btn" type="primary">上传证明</a-button>
                            </a-upload>
                            <a-button v-if="!currentData.fbghxx" class="blue-btn" type="primary" @click="ctagingNoClick(currentData.fbghxx)">上传证明</a-button>
                        </div>
                        
                        <a-upload v-if="currentData.id && !currentData.isDisabled" style="display: inline-block;" :beforeUpload="$event=>{return false}" :showUploadList="false" action="" @change="ctagingClick($event,1)">
                            <a-button class="blue-btn" type="primary" >更换证明</a-button>
                        </a-upload>
                        <a-button v-if="currentData.id" style="margin-left: 5px;" class="blue-btn" type="primary" @click="downloadFiles(currentData)">下载</a-button>
                        
                    </div>
                    <div v-if="currentData.id">
                        <div :key="iframeKey" style="display: flex;justify-content: center;overflow-y: auto;height: calc(100vh - 271px);">
                            <iframe 
                                v-if="iframeSrc"
                                :key="iframeKey"
                                :src="iframeSrc" 
                                ref="iframeServerEditingRef" 
                                scrolling="auto" 
                                width="100%"
                                height="100%"
                                style="border: 0;"
                            ></iframe>
                            <span v-else>当前文件发生错误，请刷新！</span>
                        </div>
                    </div>
                </div>
            </div>
            <div v-if="activeKey == '变更记录'">
                <commpVxeTable
                    :key="commpVxeTableKey"
                    :config="dataTableConfig" 
                    :columns="columnsVxe" 
                    :formItem="[]"
                >
                    <template v-slot:fshzt_name="{row}" data-desc="自定操作栏">
                        <span v-if="row.fshzt == '已审核'" style="color: #09f921;">{{ row.fshzt }}</span>
                        <span v-else style="color: #f90909;">{{ row.fshzt }}</span>
                    </template>
                    <template v-slot:operation_btn="{row}" data-desc="自定操作栏">
                        <a-form layout="inline" class="search-form" >
                            <a-form-item>
                                <a-button class="blue-btn" type="primary" @click="downloadFiles(row)">下载变更后文件</a-button>
                            </a-form-item>
                        </a-form>
                    </template>
                </commpVxeTable>
            </div>
            <template slot="footer">
                <div>
                    <a-button @click="visible = false">取消</a-button>
                    <a-button v-if="!currentData.isDisabled" style="margin: 0 10px;" class="blue-btn" @click="temporarilySave" type="primary">暂存</a-button>
                    <a-button v-if="!currentData.isDisabled" class="blue-btn" @click="submitTo" type="primary">提交</a-button>
                    <a-button v-if="currentData.isDisabled" class="blue-btn" @click="toExamine" type="primary">已审核</a-button>
                </div>
            </template>
        </a-modal>
    </div>
</template>
<script>
import {
    userBgsqsaveBgsqInGzdw,
    userBgsqsubmitBgsqInGzdw,
    userBgsquploadile,
    userBgsqreplaceFile,
    userBgsqqueryBgsqInfo,
    webOfficeApiopenFile,
    userBgsqdownloadFile,
    userBgsqsubmitShInBgGzdw,
} from './service/index'
import YchConstant from '@/api/YchConstant'
import blobType from '@/common/blobType'
import commpVxeTable from '@/components/commp-vxe-table/commp-vxe-table.vue'
import assessCheckApi from './service/api'
export default {
    components:{
        commpVxeTable,
    },
    props:{

    },
    data(){
        return{
            activeKey:'变更工作单位',
            tabsKey:null,
            visible:false,
            currentData:{},
            modalKey:null,
            iframeKey:null,
            iframeSrc:'',
            commpVxeTableKey:null,
            dataTableConfig:{
                api:assessCheckApi.userBgsqqueryMyGzdwSqList,
                rowId: 'id',
                height:520,
                paramet:{
                }
            },
            columnsVxe:[{ 
                type: 'checkbox', 
                width: 60 ,
                fixed: 'left'
            },{
                title: '变更后工作单位名称', //列头显示文字
                field: 'fbghxx',
            },{
                title: '变更前工作单位名称', //列头显示文字
                field: 'fbgqxx',
            },{
                title: '变更类型', //列头显示文字
                field: 'fbglx',
            },{
                title: '发起时间', //列头显示文字
                field: 'ffqsj',
            },{
                title: '办理时间', //列头显示文字
                field: 'fblsj',
            },{
                title: '审核状态', //列头显示文字
                field: 'fshzt',
                slots: {
                // 使用插槽模板渲染
                    default: 'fshzt_name',
                },
            },{
                title: '操作',
                field: 'id',
                width:145,
                slots: {
                // 使用插槽模板渲染
                    default: 'operation_btn',
                },
            }],
        }
    },
    watch:{

    },
    mounted(){
        
    },
    methods:{
        getData(val){
            this.currentData = val
            this.modalKey = Date.now()
            // if(this.currentData.id){
                userBgsqqueryBgsqInfo({id:val.id}).then(res=>{
                    if(res.code == 200){
                        this.currentData = {...this.currentData,...res.result.sq,wjjlList:res.result.wjjlList}
                        if(this.currentData.wjjlList.length){
                            if(this.currentData.wjjlList[0].fwjlx == '.doc' || this.currentData.wjjlList[0].fwjlx == '.docx'){
                                webOfficeApiopenFile({id:this.currentData.wjjlList[0].id}).then(res=>{
                                    if(res.code == 200){
                                        this.iframeSrc = res.result.wordUrl
                                        this.iframeKey = Date.now()
                                    }else{
                                        this.$message.warning(res.message)
                                    }
                                })
                            }else{
                                this.iframeSrc = bootConfig[process.env.NODE_ENV].locality_ApI + YchConstant.SPZX_SPCY + '/userBgsq/downloadFile?id='+this.currentData.wjjlList[0].id
                                this.iframeKey = Date.now()
                            }
                        }
                        //console.log(res)
                    }else{
                        this.$message.warning(res.message)
                    }
                })
            // }
            this.tabsKey = Date.now()
        },
        ctagingNoClick(val){
            if(!val){
                this.$message.warning('请先输入新工作单位')
            }else{}
        },
        ctagingClick(data,val){
            
            if(!this.currentData.id){
                userBgsqsaveBgsqInGzdw({newfgzdw:this.currentData.fbghxx}).then(res=>{
                    if(res.code == 200){
                        this.currentData = {...this.currentData,...res.result}
                        this.getData(this.currentData)
                        this.producerUpload(data.file,val)
                    }else{
                        this.$message.warning(res.message)
                    }
                })
            }else{
                this.producerUpload(data.file,val)
            }
            
        },
        producerUpload(file,val){
            //console.log('我进到文件来了1')
                // if(file.name.indexOf(".xls") !== -1 || file.name.indexOf(".xlsx") !==-1) {
            const fileData = new FormData();
            fileData.append("file",file);
            fileData.append("fywflcode",'001002');
            if(val){
                fileData.append("fileid",this.currentData.wjjlList[0].id);
            }
            fileData.append("id",this.currentData.id);
            if(val){
                userBgsqreplaceFile(fileData).then(res => {
                    if(res.code !== 200){
                        this.$message.warning('请联系管理员!')
                    }else{
                        this.getData(this.currentData)
                        this.$message.success('上传成功')
                    }
                    
                })
            }else{
                //console.log('我进到文件来了')
                userBgsquploadile(fileData).then(res => {
                    if(res.code !== 200){
                        this.$message.warning('请联系管理员!')
                    }else{
                        this.getData(this.currentData)
                        this.$message.success('上传成功')
                    }
                    
                })
            }
        },
        downloadFiles(val){//下载
            userBgsqqueryBgsqInfo({id:val.id}).then(res=>{
                    if(res.code == 200){
                        let dataObj = {...res.result.sq,wjjlList:res.result.wjjlList}
                        var that = this
                        var fileName = '工作证明'
                        let param = { fywflcode:'001002',id:dataObj.wjjlList[0].id}
                        userBgsqdownloadFile(param).then((data) => {
                            if (!data) {
                                that.$message.warning('文件下载失败')
                            return
                            }
                                let url = window.URL.createObjectURL(new Blob([data], { type: blobType.type[blobType.suffix.indexOf(dataObj.wjjlList[0].fwjlx)] }))
                                let link = document.createElement('a')
                                link.style.display = 'none'
                                link.href = url
                                link.setAttribute('download', fileName + dataObj.wjjlList[0].fwjlx)
                                document.body.appendChild(link)
                                link.click()
                                document.body.removeChild(link) //下载完成移除元素
                                window.URL.revokeObjectURL(url) //释放掉blob对象
                        })
                    }else{
                        this.$message.warning(res.message)
                    }
                })
            //console.log(val)
            
        },
        temporarilySave(){
            if(this.currentData.fbghxx){
                userBgsqsaveBgsqInGzdw({newfgzdw:this.currentData.fbghxx}).then(res=>{
                    if(res.code == 200){
                        this.currentData = {...this.currentData,...res.result}
                        this.getData(this.currentData)
                    }else{
                        this.$message.warning(res.message)
                    }
                })
            }else{
                this.$message.warning('请输入工作单位')
            }
            
        },
        submitTo(){
            if(!this.currentData.fbghxx){
                this.$message.warning('请输入工作单位')
                return
            }
            if(!this.currentData.wjjlList.length){
                this.$message.warning('请上传工作变更证明')
                return
            }
            userBgsqsubmitBgsqInGzdw({newfgzdw:this.currentData.fbghxx,id:this.currentData.id}).then(res=>{
                    if(res.code == 200){
                        this.getData([])
                        this.activeKey = '变更记录'
                    }else{
                        this.$message.warning(res.message)
                    }
                })
        },
        toExamine(){
            userBgsqsubmitShInBgGzdw({id:this.currentData.id}).then(res=>{
                if(res.code == 200){
                    this.$message.success(res.message)
                    this.$emit('refreshClick')
                }else{
                    this.$message.warning(res.message)
                }
            })
        },
        handleOk(){

        }
    }
}
</script>
<style lang="less">
.change-unit-modal{
    .ant-modal-body{
        padding: 10px;
    }
}
.change-unit-full-modal {
  .ant-modal {
    max-width: 100%;
    top: 0;
    padding-bottom: 0;
    margin: 0;
  }
  .ant-modal-content {
    display: flex;
    flex-direction: column;
    height: calc(100vh);
  }
  .ant-modal-body {
    flex: 1;
    height: calc(100vh - 50px);
    overflow-y: auto;
  }
}
</style>